<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>传智健康</title>
    <link rel="stylesheet" media="screen" href="css/dmaku.main.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="referrer" content="origin">
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="plugins/elementui/index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="css/back-style.css">
</head>
<body>
<style>
    css-doodle {
    --rule: ( :doodle {
              @grid: 50x1 / 100vmin;
                  perspective: 90vmin;
              }

    background: @multi(@r(40, 20), (radial-gradient(@p(#53d9d1, #f27b9b, #eb7132) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat));

    @size: 120%;
    @place-cell: center;

    border-radius: 50%;
    transform-style: preserve-3d;
    animation: scale-up 15s linear infinite;
    animation-delay: calc(@i() * -.4s);

    @keyframes scale-up {
        0% {
            opacity: 0;
            transform: translate3d(0, 0, 0) rotate(0);
        }

        10% {
            opacity: 1;
        }

        95% {
            transform: translate3d(0, 0, @r(40vmin, 85vmin)) rotate(@r(-360deg, 360deg));
        }

        100% {
            opacity: 0;
            transform: translate3d(0, 0, 1vmin);
        }
    }

    );
    }
</style>
<css-doodle use="var(--rule)"></css-doodle>
<!-- partial -->
<script src='js/css-doodle.min.js'></script>
<!--<img id="bg" src="img/2377.jpg" />-->
<div id="app" class="wrapper" style="width: 300%; position: absolute">
<!--    <div class="top_wrapper">-->
<!--        <div class="container">-->
<!--            <div class="col-sm-12 header"><img src="img/logo.png"/></div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="container" style="opacity: 0.85;">
        <div class="row">
            <div class="col-sm-12 login_content_wrapper">
                <div class="content_wrapper">
                    <br>
                    <div style="text-align:center;"><img src="img/loginLogo.png"/></div>
                    <br><br>
                    <!--提示信息-->
                    <div id="info"></div>
                    <!--                    <div hidden="true" id="phone_dn_ex" class="alert alert-danger"><p>手机号不存在！</p></div>-->
                    <!--                    <div hidden="true" id="change_pwd_failed" class="alert alert-danger"><p>修改失败！请联系管理员！</p></div>-->
                    <h1 class="title">忘记密码 - 修改密码</h1>
                    <form class="new_user_session" id="new_user_session" accept-charset="UTF-8"
                          method="post">
                        <div class="form-group">
                            <label for="telephone">手机号</label>
                            <input autofocus="autofocus" class="form-control" type="text" value="" name="telephone"
                                   id="telephone" required="true" v-model="chgPwdInfo.telephone"/>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-7">
                                    <input autofocus="autofocus" class="form-control" type="text" value=""
                                           name="validateCode" v-model="chgPwdInfo.validateCode"
                                           id="validateCode" placeholder="请输入验证码"/>
                                </div>
                                <div class="col-sm-5">
                                    <input id="validateCodeButton" class="btn btn-default btn-info"
                                           value="获取验证码" style="width: 100%"
                                           type="button" @click="sendValidateCode()"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password">修改的密码</label>
                            <input autocomplete="off" class="form-control" type="password" name="password"
                                   id="password" required="true" v-model="chgPwdInfo.password"/>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <input class="btn btn-default" value="返回" type="button"
                                           onclick="javascript :history.go(-1);"/>
                                </div>
                                <div class="col-xs-12 col-sm-6 text-right">
                                    <input class="btn btn-default btn-success" value="修改密码"
                                           @click="handleChgPwd()"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <p class="copyright" style="color: #353535">&copy; 2020 传智健康</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="plugins/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            chgPwdInfo: {}
        },
        methods: {
            //发送验证码
            sendValidateCode() {
                //获取用户输入的手机号
                var telephone = document.getElementById("telephone").value;
                //调用js方法，校验输入的手机号是否合法
                if (!checkTelephone(telephone)) {
                    //校验不通过，提示错误信息
                    this.showInfo("alert alert-danger","请输入正确的手机号");
                    return false;
                }
                //在按钮上显示30秒倒计时效果
                validateCodeButton = $("#validateCodeButton")[0];//锁定dom对象
                //发送ajax请求，为用户发送手机验证码
                axios.post("/validateCode/send4ChgPwd.do?telephone=" + telephone).then((res) => {
                    if(!res.data.flag){
                        //短信验证码发送失败
                        this.showInfo("alert alert-danger",res.data.message);
                    }else{
                        //成功
                        clock = window.setInterval(doLoop, 1000);//定时器方法，可以实现每隔指定的时间调用指定的方法
                        this.showInfo("alert alert-success",res.data.message);
                    }
                });
            },
            showInfo(clz, message) {
                $("#info").empty();
                $("#info").append("<div class='" + clz + "'><p>" + message + "</p></div>");
                window.setTimeout("$(\"#info\").empty();",5000);
            },
            //处理修改密码请求
            handleChgPwd(){
                if (this.chgPwdInfo.validateCode == null) {
                    //校验不通过，提示错误信息
                    this.showInfo("alert alert-danger","请输入验证码");
                    return false;
                }
                if (this.chgPwdInfo.password == null) {
                    //校验不通过，提示错误信息
                    this.showInfo("alert alert-danger","请输入密码");
                    return false;
                }
                //获取用户输入的手机号
                var telephone = document.getElementById("telephone").value;
                //调用js方法，校验输入的手机号是否合法
                if(!checkTelephone(telephone)){
                    //校验不通过，提示错误信息
                    this.showInfo("alert alert-danger","请输入正确的手机号");
                    return false;
                }
                //发送ajax请求，将表单数据提交到Controller进行登录处理
                axios.post("/user/chgpwd.do",this.chgPwdInfo).then((res) => {
                    if(res.data.flag){
                        //修改成功 跳转
                        window.location.href = "/login.html?chgpwd=true";
                    }else{
                        //判断返回数据是否false
                        if(res.data.data == false){
                            //尝试次数过多
                            this.showInfo("alert alert-danger",res.data.message);
                        }else{
                            this.showInfo("alert alert-danger",res.data.message);
                        }
                    }
                });
            }
        },
        mounted() {

        }
    })
</script>
</html>
